<template>
  <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-6">UnoCSS 图标演示</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Carbon 图标集合演示 -->
      <div class="border rounded-lg p-6 shadow-sm">
        <h2 class="text-xl font-semibold mb-4 flex items-center">
          <div class="i-carbon-logo-github mr-2 text-primary"></div>
          Carbon 图标集合
        </h2>
        
        <div class="grid grid-cols-3 md:grid-cols-5 gap-4">
          <div class="flex flex-col items-center justify-center p-2 border rounded hover:bg-gray-50">
            <div class="i-carbon-home text-3xl text-primary"></div>
            <span class="text-xs mt-2">home</span>
          </div>
          <div class="flex flex-col items-center justify-center p-2 border rounded hover:bg-gray-50">
            <div class="i-carbon-user text-3xl text-primary"></div>
            <span class="text-xs mt-2">user</span>
          </div>
          <div class="flex flex-col items-center justify-center p-2 border rounded hover:bg-gray-50">
            <div class="i-carbon-settings text-3xl text-primary"></div>
            <span class="text-xs mt-2">settings</span>
          </div>
          <div class="flex flex-col items-center justify-center p-2 border rounded hover:bg-gray-50">
            <div class="i-carbon-notification text-3xl text-primary"></div>
            <span class="text-xs mt-2">notification</span>
          </div>
          <div class="flex flex-col items-center justify-center p-2 border rounded hover:bg-gray-50">
            <div class="i-carbon-search text-3xl text-primary"></div>
            <span class="text-xs mt-2">search</span>
          </div>
        </div>
      </div>
      
      <!-- Logos 图标集合演示 -->
      <div class="border rounded-lg p-6 shadow-sm">
        <h2 class="text-xl font-semibold mb-4 flex items-center">
          <div class="i-logos-vue mr-2"></div>
          Logos 图标集合
        </h2>
        
        <div class="grid grid-cols-3 md:grid-cols-5 gap-4">
          <div class="flex flex-col items-center justify-center p-2 border rounded hover:bg-gray-50">
            <div class="i-logos-vue text-3xl"></div>
            <span class="text-xs mt-2">vue</span>
          </div>
          <div class="flex flex-col items-center justify-center p-2 border rounded hover:bg-gray-50">
            <div class="i-logos-react text-3xl"></div>
            <span class="text-xs mt-2">react</span>
          </div>
          <div class="flex flex-col items-center justify-center p-2 border rounded hover:bg-gray-50">
            <div class="i-logos-javascript text-3xl"></div>
            <span class="text-xs mt-2">javascript</span>
          </div>
          <div class="flex flex-col items-center justify-center p-2 border rounded hover:bg-gray-50">
            <div class="i-logos-typescript-icon text-3xl"></div>
            <span class="text-xs mt-2">typescript</span>
          </div>
          <div class="flex flex-col items-center justify-center p-2 border rounded hover:bg-gray-50">
            <div class="i-logos-github-icon text-3xl"></div>
            <span class="text-xs mt-2">github</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 示例按钮 -->
    <div class="mt-8">
      <h2 class="text-xl font-semibold mb-4">UnoCSS 按钮示例</h2>
      <div class="flex flex-wrap gap-4">
        <button class="btn btn-primary">
          <div class="i-carbon-add mr-1"></div>
          主要按钮
        </button>
        <button class="btn bg-green-500 text-white hover:bg-green-700">
          <div class="i-carbon-checkmark mr-1"></div>
          成功按钮
        </button>
        <button class="btn bg-amber-500 text-white hover:bg-amber-700">
          <div class="i-carbon-warning mr-1"></div>
          警告按钮
        </button>
        <button class="btn bg-red-500 text-white hover:bg-red-700">
          <div class="i-carbon-close mr-1"></div>
          危险按钮
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 无需特殊导入，UnoCSS会自动处理图标
</script> 